<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本知识</title>
</head>
<body>
<br/>--------------------------------------------------------------------------------------------------------------<br/>
<!-- 1、标题
  h1~6
    align  属性是对齐属性
        center 居中
        left   左
        right  右
 -->
<h1 align="center">这是h1大字号标题,并使用了居中属性</h1>  <br/>
<h2>这是h6最小号标题</h2>  <br/>

<!-- 2、超链接
  a 标签是 超链接
    --属性herf设置链接的地址
    --属性target设置哪个目标进行跳转
       _self  表示当前页面
       _blank 表示打开新页面来进行跳转
-->
<br/>--------------------------------------------------------------------------------------------------------------<br/>
2、超链接展示：<br/>
<a href="https://wwww.baidu.com" target = "_self"> a标签的功能，点我，在当前也跳转至百度首页</a> <br/>
<a href="https://wwww.baidu.com" target = "_blank"> a标签的功能，点我，在新页面跳转至百度首页</a> <br/>

<!-- 3、列表：有序列表、无序列表
    ul 无须列表
      type 属性可以修改列表前面的符号

    ol 是有序列表
 -->
<br/>--------------------------------------------------------------------------------------------------------------<br/>
3、列表：有序列表、无序列表
<ul> <!-- 无序列表 unorder list -->
  3.1无序列表展示：
  <li>我是第一行</li> <!-- li 是 list item 的简写 -->
  <li>我是第2行</li><li>我是第2.1行</li>
  <li>我是第三行</li>
</ul>

<ul type = "none"> <!-- 使用target属性修改前面的符号 -->
  3.1.1无序列表使用type属性展示：
  <li>前面的符号没有了</li>
  <li>但是有些浏览器还是会有，比如ie</li><li>
  <li>不同浏览器对此的兼容程度不一样，以后要注意</li>
</ul>

<ol> <!-- 有序列表 order list -->
  3.2有序列表展示：
  <li>我是第1行</li> <!-- li 是 list item 的简写 -->
  <li>我是第2行</li><li>我是第2.1行</li>
  <li>我是第3行</li>
</ol>

<!-- 4、 img 标签  显示图片，修改长宽高，边框等属性
    img标签，显示图片
        src 属性可以设置图片路径，注意和javaSE中的路径区别
              javaSE中：绝对路径--盘符：/目录/文件名
                        相对路径--从工程名开始算
              web中：   相对路径
                            .        表示当前文件所在目录
                            ..       表示当前文件所在的上一级目录
                            文件名   表示当前文件所在目录的文件 ，相当于 ./文件名     ./ 可以省略
                        绝对路径
                            正确格式： http://ip:port/工程名/资源路径
        width heigth 属性可设置宽高
        border 属性设置边框大小
        alt 设置找不到图片后显示的提示内容
-->
<br/>--------------------------------------------------------------------------------------------------------------<br/>

<hr/> <!--这个hr作用就是画一个横线 -->

4、img单标签，图片展示 <br/>
第一张,有边框<br/>
<img src="./img02.jpg" width="200" height="260" border="2"/><br/>
第二张，无边框<br/>
<img src="../img01.jpg" width="300" height="360"/><br/>
第3张，无图片，测试 alt 属性的作用<br/>
<img src="img01.jpg" width="300" height="360" alt="找不到图片，这就是alt的作用"/> <br/>

<!-- 5、表格标签 table

          table: 表格标签
             border属性  边框大小
             width heigth 属性 宽高
             align 属性整个表格在整个页面的对齐方式
             cellspacing 设置单元格与单元格之间的间距
          tr： 行标签
          th： 表头标签
          td： 单元格标签
               align 属性设置单元格文本对齐方式
          b:   文本加粗
-->
<br/>--------------------------------------------------------------------------------------------------------------<br/>
5、表格标签 table
<table border="1" width="300" heigth="300" align="center" cellspacing="5"> <!--表示表格的标签 -->
  <tr>  <!-- 表示行-->
    <tH>1.1</tH> <!-- 表头标签 效果 -->
    <td>1.2</td> <!-- 行内的 单元格 -->
    <td>1.3</td>
  </tr>
  <tr>  <!-- 表示行-->
    <td>2.1</td> <!-- 行内的 单元格 -->
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>  <!-- 表示行-->
    <td>3.1</td> <!-- 行内的 单元格 -->
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
<br/>-----------------------------------------<br/>
5.1展示跨行跨列的表格展现形式<br/>
<!-- 需求如下：
新建一个5行5列的表格，
第一行第一列的单元格要跨2列
第2行第一列的单元格要跨2行
第4行第4列的单元格要跨2行2列

    colspan 属性设置跨列
    romspan 属性跨列

-->
<table border="1" width="400" height="500" cellspacing="0">
  <tr>
    <td colspan="2">1.1</td>  <td>1.3</td> <td>1.4</td> <td>1.5</td> <!-- 把第1.2列占据了，所以1.2要去掉，否则会出现错位 -->
  </tr>
  <tr>
    <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td>
  </tr>
  <tr>
    <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td>
  </tr>
  <tr>
    <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td>
  </tr>
  <tr>
    <td>5.1</td> <td>5.2</td> <td>5.3</td>
  </tr>
</table>
<br/>--------------------------------------------------------------------------------------------------------------<br/>
<!--
iframe 框架标签
    使用方式1：iframe标签可以在一个页面上开辟一格单独的页面
    使用方式2：在单独开辟的窗口上，加载另一个html
                iframe与a标签组合使用的步骤：
                  1. 在iframe标签中使用 name 属性定义一个名称
                  2. 在 a 标签的 target 属性上写上 iframe标签上的 name 属性值



-->
6、iframe框架标签使用展示 <br/>
6.1使用方式1展示<br/>
<iframe src="HelloWorld.html" width="200" height="100"></iframe> <br/>

6.2使用方式2展示<br/>
<iframe src="HelloWorld.html" width="500" height="300" name="responce"></iframe> <br/>
<ul>
  <li><a href="LinkWeb1.html" target="responce" >这是链接网址-1</a></li>
  <li><a href="LinkWeb2.html" target="responce" >这是链接网址-2</a></li>
</ul>

<br/>--------------------------------------------------------------------------------------------------------------<br/>


<br/>--------------------------------------------------------------------------------------------------------------<br/>


<br/>--------------------------------------------------------------------------------------------------------------<br/>


<br/>--------------------------------------------------------------------------------------------------------------<br/>
</body>
</html>